<template>
    <div class="system">
      <div class="return" v-if="clienId" @click="back">
        <img class="backImg" src="@/assets/images/back.png" alt />
      </div>
      <div class="top">
        <div class="title">
          <i class="el-icon-collection-tag" />基本资料
        </div>
        <div style="text-align: right;">
          <el-button  v-if="detail.is_show_affirm" type="danger" size="mini" class="mb10" plain @click="turnShop()">确认订单</el-button>
          <el-button  v-if="detail.is_show_update" type="danger" size="mini" class="mb10" plain @click="openDialog('修改订单')">修改订单</el-button>
          <el-button  v-if="detail.is_show_cancel" type="danger" size="mini" class="mb10" plain  @click="hint('del','作废此订单')">作废订单</el-button>
        </div>
      </div>
      <el-descriptions class="margin-top" :column="4" border>
        <el-descriptions-item>
          <template slot="label">发起顾客姓名</template>
          {{detail.initiator_customer}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">发起门店</template>
          {{detail.initiator_shop}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">发起时间</template>
          {{detail.create_time}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">发起人</template>
          {{detail.initiator_name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">确认顾客信息</template>
          {{detail.affirm_customer}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">确认门店</template>
          {{detail.affirm_shop?detail.affirm_shop:'暂无'}}
        </el-descriptions-item>
      
        <el-descriptions-item>
          <template slot="label">确认时间</template>
          {{detail.affirm_time?detail.affirm_time:'暂无'}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">确认人</template>
          {{detail.affirm_name?detail.affirm_name:'暂无'}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">顾客所在门店</template>
          {{detail.md_shop_name?detail.md_shop_name:'暂无'}}
        </el-descriptions-item>

    
        <el-descriptions-item>
          <template slot="label">订单号</template>
          {{detail.order_no}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">订单类型</template>
          {{detail.order_type}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">渠道</template>
          {{detail.order_channel}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">收款方式</template>
          {{detail.refund_type_plus?detail.refund_type_plus:'暂无'}}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">销售组织</template>
          {{detail.sales_name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">收/退款组织</template>
          {{detail.settlement_name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">订单状态</template>
          <span v-if="detail.status == 0">未发起</span>
          <span v-if="detail.status == 1">待确认</span>
          <span v-if="detail.status == 2">已确认</span>
          <span v-if="detail.status == 3">作废</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label" >订单总额</template>
          {{detail.order_amount}}
        </el-descriptions-item>
        <el-descriptions-item >
          <template slot="label">赠金</template>
          {{detail.gift_amount}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">本金</template>
          {{detail.pay_amount}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">店转</template>
          {{detail.shop_transfer_amount}}
        </el-descriptions-item>
      
        <el-descriptions-item>
          <template slot="label">成交时间</template>
          {{detail.deal_time}}
        </el-descriptions-item>
       
      
      
      <el-descriptions-item >
      <template slot="label">对方银行账户</template>
        {{detail.bank_account?detail.bank_account:'暂无'}}
      </el-descriptions-item>
  
      <el-descriptions-item>
        <template slot="label">对方账户名称</template>
        {{detail.bank_name?detail.bank_name:'暂无'}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">对方开户行</template>
        {{detail.bank_deposit?detail.bank_deposit:'暂无'}}
      </el-descriptions-item>
  
        <el-descriptions-item>
          <template slot="label">订单描述</template>
          {{detail.description?detail.description:'暂无'}}
        </el-descriptions-item>
  
    
      </el-descriptions>
      <div class="top">
        <div class="title mt20">
          <i class="el-icon-collection-tag" />
          <span>转诊单明细</span>
        </div>
      </div>
      <!--列表-->
      <el-row>
        <el-col :span="24">
          <el-table
            :data="list"
            size="small"
            border
            :cell-style="$style.cellStyle"
            :header-cell-style="$style.rowClass"
          >  
            <ElTableColumn label="业务类型"  prop="business_type" />
            <ElTableColumn label="业务二级类型" prop="business_two_type" />
            <ElTableColumn label="结算方式" prop="refund_mode_name" />
            <ElTableColumn label="本金"   prop="pay_price" />
            <ElTableColumn label="赠金" >
              <template slot-scope="{ row }">
                  <span>{{row.gift_price}}</span>
                </template>
            </ElTableColumn>
            <ElTableColumn label="店转金额"  >
              <template slot-scope="{ row }">
                <span>{{row.shop_transfer_price}}</span>
              </template>
            </ElTableColumn>
  
          </el-table>

        </el-col>
      </el-row>
  

    <!-- 选择拆单-订单类型 -->
    <el-dialog title="订单类型" :visible.sync="dialogVisible" width="40%">
      <el-form
        ref="turnDetail"
        label-position="right"
        label-width="170px"
       
        :model="turnDetail"
        class="formBox"
      >
        <el-form-item label="订单类型:">
          <el-radio-group v-model="turnDetail.order_type">
            <el-radio :label="1">新单</el-radio>
            <el-radio :label="2">补单</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="btnBox">
          <el-button type="primary" size="mini" @click="hint('affirm','确认此订单')">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>

    </div>
  </template>
  
  <script>
  import { referralOrderDetail, referralOrderGoods,referralOrderCancel,referralOrderAffirm } from "@/api/order";
  class TurnDetail {
    order_type = 1;
  }
  export default {
    name: "system",
    data() {
      return {
        turnDetail: new TurnDetail(), //拆单-订单类型
        system: {},
        remark: "",
        detail: [],
        list: [],
        type: "",
        clienId: "",
        types: "",
        dialogVisible: false,
        form: {},
        formLabelWidth:'120px',
        noKing:'',
      };
    },
    mounted() {
      this.type = this.$route.query.type;
      this.types = this.$route.query.types;
      this.clienId = this.$route.query.clienId;
      this.noKing = this.$route.query.noKing;
      this.getDetail();
    },
    methods: {
      // 获取详情
      getDetail() {
        referralOrderDetail({
          order_id: this.$route.query.id,
        }).then(res => {
          this.detail = res.data;
        });
        referralOrderGoods({
          order_id: this.$route.query.id,          
        }).then(res => {
          this.list = res.data;
        });
      },
      // 提示
      hint(type,text) {
        this.$confirm(`${text}，是否确定？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            if(type == 'del'){
              this.delOrder();
            }
            if(type == 'cancel'){
              this.cancelOrder();
            }
            if(type == 'affirm'){
              this.referralOrderAffirm();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      // 撤销订单
      cancelOrder(){
        console.log('撤销订单');   
        const loading = this.$loading({
          lock: true,
          text: "提交中，请稍后...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        
        delRefundOrder({ order_id: this.$route.query.id,status:3,is_cancel:1}).then(res => {
          loading.close();
            this.$message({
              type: "success",
              message: res.msg
            });
            if(this.clienId){
              this.back()
            }else{
              this.$router.go(-1)
            }
        }).catch(err => {
           loading.close();
        });;
      },
    // 客户转店弹框
    turnShop() {
      this.dialogVisible = true;
    },
      // 确认订单
      referralOrderAffirm(){
        console.log('确认订单');
        const loading = this.$loading({
          lock: true,
          text: "提交中，请稍后...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        referralOrderAffirm({ order_id: this.$route.query.id,...this.turnDetail}).then(res => {
           loading.close();
           this.dialogVisible = false;
            this.$message({
              type: "success",
              message: res.msg
            });
            if(this.clienId){
              this.back()
            }else{
              this.$router.go(-1)
            }
        }).catch(err => {
           loading.close();
           this.dialogVisible = false;
        });

      },

      // 作废订单
      delOrder(){
        const loading = this.$loading({
          lock: true,
          text: "提交中，请稍后...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        referralOrderCancel({ order_id: this.$route.query.id,status:3}).then(res => {
            this.$message({
              type: "success",
              message: res.msg
            });
            if(this.clienId){
              this.back()
            }else{
              this.$router.go(-1)
            }
            loading.close();
        }).catch(err => {
           loading.close();
        });;
      },
      // 修改订单信息
      openDialog(type, row) {
        console.log(this.detail);
       const query = { id:this.detail.id };
       switch (type) {
         case "修改订单":
           this.$router.push({ name: "修改转诊单订单", query });
           break;
        }
      },
      // 返回
      back() {
        const query = {
          id: this.$route.query.clienId,
          customer_name: this.$route.query.detail.customer_name,
          detail:this.$route.query.detail,
          activeName: this.$route.query.types
        };
        this.$router.push({ name: "客户详情", query });
      },
  
      submitTurn()
      {
        console.log(this.form.turn);
        console.log(this.detail.refund_order_no);
  
        // const query = {
        //   refundID : this.detail.refund_order_no,
        //   turnMoney : this.form.turn,
        // }
  
        this.$confirm(`分配业绩是否确定？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          addTurnRefund({
            refundID: this.detail.refund_order_no,
            turnMoney : this.form.turn,
          }).then(res => {
            console.log(res);
          });
        }).catch(() => {
          console.log('444');
        });
      },
    }
  };
  </script>
  
  <style lang='scss' scoped>
  .return {
    position: fixed;
    right: 20px;
    top: 71px;
    z-index: 999;
    .backImg {
      margin-right: 14px;
      width: 32px;
      height: 100%;
      cursor: pointer;
      vertical-align: middle;
    }
  }
  .top {
    display: flex;
    justify-content: space-between;
    .title {
      font-weight: bold;
      font-size: 14px;
      line-height: 34px;
      color: #666;
    }
  }
  ::v-deep .el-descriptions-item__label.is-bordered-label {
    background: #f9fafc;
  }
  
  </style>
  